<template>
  <div class="jptj">
    <div
      class="jptj-item"
      v-for="item in images"
      :key="item.id"
    >
      <img
        v-lazy="item.image"
        alt=""
        @click="aaa(item.id)"
       
      >
      <span class="title">{{item.storeName}}</span>
      <span class="otprice">${{item.otPrice}}</span>
      <p class="price">${{item.price}}</p>
    </div>

  </div>
</template>
<script>
export default {
  props: ['id'],
  data() {
    return {

      images: []
    }
  },
  created() {
    console.log(this.id);
    this.getproduct()
  },
  methods: {
    async getproduct() {
      const res = await this.$http.getproduct(this.id)
      console.log(res.data.data.list);
      this.images = res.data.data.list
    },
    aaa(id) {
     this.$router.push(`/goods_combination_details/index?id=${id}`)
    }
  }

}
</script>
<style lang="scss" scoped>
* {
  padding: 0;
  margin: 0;
}
.jptj {
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  .jptj-item {
    margin-right: 20px;
    img {
      width: 175px;
      height: 160px;
    }
    .title {
      width: 156px;
      height: 20px;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
    .otprice {
      color: #ccc;
      text-decoration: line-through;
    }
    .price {
      color: red;
    }
  }
}
</style>